<template>
  <div class="bg">
    <nav-com
      :title="$t('rilititle')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <!--          滑动-->
      <div class="swiper-rong">
        <div  class="swiper-rong-neibu">
          <div class="swiper-items-rili">
            <div class="swiper-item-flex">
              <div class="swiper-item-left">
                <van-cell-group inset class="m-b-10 m-t-10 teshu">
                  <van-cell inset >
                    <van-row class="item-content" align="center">
                      <van-col span="12" class="qixingtitlerili" @click="showriliyear=true">
                        <span>{{dateyear}}</span>
                        <van-icon name="arrow-down" size="30" style="margin-left: 10px"/>
                      </van-col>
                      <van-col span="12" class="qixingtitlerili" style="display: flex;justify-content: flex-end" @click="showrilimonthed=true">
                        <span>{{datemonth}}</span>
                        <van-icon name="arrow-down" size="30" style="margin-left: 10px"/>
                      </van-col>
                    </van-row>
                  </van-cell>
                </van-cell-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 两端对齐 -->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content">
            <van-col span="24" class="qixingtitle">{{ $t('qixingshuju') }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item">
          <div class="group-item-content-teshu">
            <div class="group-item-content-flex">
              <div class="topcontent">{{ today.mileage?today.mileage:'0' }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                <div>{{ $t('licheng') }}</div>
              </div>

            </div>
            <div class="group-item-content-flex">
              <div class="topcontent">{{ today.timelength?today.timelength:'00:00:00' }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                <div>{{ $t('shichang') }}</div>
              </div>

            </div>
            <div class="group-item-content-flex">
              <div class="topcontent">{{ today.num?today.num:'0' }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                <div>{{ $t('cishu') }}</div>
              </div>
            </div>
            <div  class="group-item-content-flex">
<!--              <div class="topcontent">{{ today.calories }}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                <div>{{ $t('kaluli') }}</div>-->
<!--              </div>-->

            </div>
          </div>
        </div>
      </van-cell-group>
      <!-- 两端对齐 -->
      <load-more  :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
        <van-swipe-cell v-for="(item,index) in dataList" :key="index" :right-width="80">
          <van-cell-group inset class="m-b-10 m-t-10 teshu"  @click="jumpTo('/sportcontent',item.id)">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">{{ item.startdate }}</van-col>
                <van-col span="14">
                  {{ item.stend }}
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  {{item.user_post}}
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  {{item.end_post}}
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>{{ item.mileage }}</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>{{ item.timelength }}</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>{{ item.num }}</div>
                </div>
                <!--              <div  class="group-item-content-flex">-->
                <!--                <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
                <!--                <div>{{ item.calories }}</div>-->
                <!--              </div>-->
              </div>
            </div>
          </van-cell-group>
          <template #right>
            <div class="delete-button" @click="deleteHistory(item.id)">{{ $t('delet')}}</div>
          </template>
        </van-swipe-cell>
      <!-- 两端对齐 -->
      </load-more>
    </div>
<!--    年-->
    <van-popup
      round
      v-model="showriliyear"
      position="bottom"
      :style="{ height: '50%','z-index':'10000000' }"
      class="z-index1000"
    >
      <van-picker
        class="jiabold"
        title=""
        :item-height="44"
        show-toolbar
        :columns="columnsyear"
        @confirm="onConfirm"
        @cancel="onCancel"
        :confirm-button-text="$t('sure')"
        :cancel-button-text="$t('close')"
      />
    </van-popup>
<!--    月-->
    <van-popup
      round
      v-model="showrilimonthed"
      position="bottom"
      :style="{ height: '50%','z-index':'10000000' }"
      class="z-index1000"
    >
      <van-picker
        class="jiabold"
        title=""
        :item-height="44"
        show-toolbar
        :columns="$t('yuefen')"
        @confirm="onConfirmmonth"
        @cancel="onCancelmonth"
        :confirm-button-text="$t('sure')"
        :cancel-button-text="$t('close')"
      />
    </van-popup>
<!--    之前日历-->
    <van-popup
      round
      v-model="showrili"
      position="center"
      :style="{ height: '61%','z-index':'10000000' }"
      class="z-index1000"
    >
      <div class="rili-content">
        <ri-li @clickCurrentDay="clickCurrentDay"></ri-li>
      </div>
    </van-popup>
    <van-icon v-show="showrili" name="close" class="closed-icon" color="#fafafa" size="34" @click="showrili=false"/>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import riLi from '@/components/rili.vue'
import loadMore from '@/components/loadmore.vue'
import {
  returnData
} from '@/utils/day.js'
import {cyclingDel, drivceList} from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom,
    riLi,
    loadMore
  },
  data () {
    return {
      date: returnData(new Date()),
      dateyear: '',
      datemonth: '',
      enableLoadMore: true,
      showrilimonthed: false,
      showriliyear: false,
      showrili: false,
      active: 0,
      searchValue: '',
      checked: true,
      showView: true,
      title: '骑行日历',
      showPage: true,
      lichengValue: '',
      swiperData: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      columnsyear: [],
      dataList: [],
      today: {},
      time: '',
      page:1,
    }
  },
  mounted () {
    for (var i = 2023; i < 2050; i++) {
      this.columnsyear.push(i)
    }
    let now = new Date(this.date) // 当前日期
    let indexs = null
    this.$t('yuefen').forEach((item, index) => {
      if (now.getMonth() == index) {
        if (index + 1 < 10) {
          indexs = '0' + String(index + 1)
        }
        this.datemonth = item // 当前月
      }
    })
    this.dateyear = now.getFullYear() // 当前年
    this.time = this.dateyear + '-' + indexs
    this.init()
  },
  methods: {
    deleteHistory(id){
      cyclingDel({ id: id}).then((res) => {
        this.$toast(res.msg);
        this.dataList = []
        this.page = 1
        this.onSearch()
      })
    },
    onConfirm (value, index) {
      this.dateyear = value
      this.dataList = []
      let indexs = null
      this.$t('yuefen').forEach((item, index) => {
        if (this.datemonth == index) {
          if (index + 1 < 10) {
            indexs = '0' + String(index + 1)
          }
        }
      })
      this.time = this.dateyear + '-' + indexs
      this.page = 1
      this.onSearch()
      this.showriliyear = false
    },
    onCancel () {
      this.showriliyear = false
    },
    onConfirmmonth (value, index) {
      this.datemonth = value
      if (index + 1 < 10) {
        index = '0' + String(index + 1)
      }
      this.dataList = []
      this.time = this.dateyear + '-' + index
      this.page = 1
      this.onSearch()
      this.showrilimonthed = false
    },
    onCancelmonth () {
      this.showrilimonthed = false
    },
    clickCurrentDay (date) {
      console.log('========date', date)
      this.date = date.data
      this.showrili = false
    },
    jumpTo (url,canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {})
      } else {
        this.$router.go(-1)
      }
    },
    clearHistory () {
      this.$toast('清理缓存成功')
    },
    // 初始化
    init () {
      this.onSearch()
    },
    onLoadMore (done) {
      setTimeout(() => {
        if (!this.enableLoadMore) {
          return
        }
        this.page = this.page + 1
        this.onSearch()
        done()
      }, 200)
    },
    onSearch () {
      drivceList({ page: this.page, time: this.time }).then((res) => {
        if (res.code == 1) {
          if (res.data.list.length < 10) {
            this.enableLoadMore = false
          }
          this.today = res.data.today
          this.dataList = this.dataList.concat(res.data.list)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.m-t-16{
  margin-top: 13.33vw;
}
.bg{
  background: #F8F8F8;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.top-view1{
  margin-top: 26.23vw;
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .van-swipe-cell__right{
  display: flex;
  align-items: center;
  right: -4px!important;
}
.delete-button{
  height: 50px;
  width: 50px;
  background: linear-gradient(90deg, #f54558 0%, #de001a 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
}
.van-search__action{
  padding: 0;
}
.van-search{
  padding: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family:PingFang, PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family:PingFang, PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding:0 15px 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    &:first-child{
      padding: 10px 0;
    }
    .group-item-left{
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
      }
      img{
        width: 15px;
        margin-right: 10px;
      }
      .management_name{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-start;
      width: 77%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303030;
    }
  }
  .group-item-content{
    border-top: 0.02667rem solid #ebedf0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-small{
        width: 15px;
        margin-right: 4px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
  .group-item-content-teshu{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      .topcontent{
        width: 100%;
        display: flex;
        //justify-content: center;
      }
      div{
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      .group-item-content-flex-shuliang{
        padding-top: 5px;
        display: flex;
        align-items: center;
        .icon-small{
          width: 15px;
          margin-right: 4px;
        }
        div{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #808080;
        }
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
}
.item-content{
  width: 100%;
  display: flex;
  align-items: center;
}
.van-search__content {
  background-color: #EEEEEE;
}
::v-deep .van-tabs__nav{
  border-bottom: 1px solid #fafafa!important;
  border-top: 1px solid #fafafa!important;
}
::v-deep .van-tabs__line {
  bottom: 0.6rem;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.333rem;
}
.swiper-rong{
  width: 100vw;
  overflow-x: scroll;
  .swiper-rong-neibu{
    white-space: nowrap;
    .rili-content{
      width: 90vw;
      height: 50vh;
      background: #fff;
    }
    .swiper-items{
      display: inline-block;
      width: 264px;
      height: 110px;
      margin:10px 20px 10px 0;
      padding: 10px;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0px 0px 6px 0px rgba(63,156,148,0.3);
      &:first-child{
        margin-left:20px;
      }
      .swiper-item-flex{
        display: flex;
        .swiper-item-left{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          .swiper-name{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #0AD39F;
          }
          .swiper-subname{
            font-size: 16px;
            font-family: Helvetica;
            color: #303030;
          }
          .btns{
            background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
            box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
            border-radius: 6px;
            color: #ffffff;
            font-size: 18px;
            padding: 6px 17px;
          }
        }
        .swiper-item-right{
          width: 110px;
          height: 110px;
          font-size: 30px!important;
        }
      }
    }
    .swiper-items-rili{

    }
  }
}
.qixingtitle{
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
}
.qixingtitlerili{
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  color: #303030;
  display: flex;
  align-items: center;
  height: 100%;
}
.closed-icon{
  position: fixed;
  bottom: 1.5rem;
  left: 45%;
  z-index: 1005001;
  font-size: 34px!important;
}
::v-deep .van-tab{
  font-size: 16px;
}
.z-index1000{
  z-index: 1000000!important;
}
::v-deep .van-overlay{
  z-index: 999999!important;
}
.swiper-item-rili{
  font-size: 34px!important;
}
::v-deep .jiabold .van-picker-column,::v-deep .jiabold .van-picker__title, ::v-deep .jiabold .van-picker__confirm, ::v-deep .jiabold .van-picker__cancel{
  font-size: 20px!important;
}
</style>
